<template>
	<view>
		<view class="ld">
			<view class="left">
				<scroll-view :scroll-y="true" :scroll-with-animation="true" :scroll-into-view="clickToId"
					:style="{ height: windowHeight }">
					<view v-for="(item, index) in list" :key="index">
						<view :class="['title', { active: index === currentNum }]" :id="'to' + index"
							@click="setId(index)">{{ item.title }}</view>
					</view>
				</scroll-view>
			</view>
			<view class="right">
				<scroll-view :scroll-into-view="clickId" @scroll="scroll" :scroll-with-animation="true" :scroll-y="true"
					:style="{ height: windowHeight }">
					<view class="shangjia">
						<text>共个商家</text>
					</view>
					<view v-for="(item, index) in list" :key="index">
						<view class="title,right_title" :id="'po' + index"></view>
						<view class="item">
							<view class="item-img" v-for="(it, idx) in item.list" :key="idx">
								<!-- <image :src=" '/static/image/' + item.icon + '.png' " mode=""></image> -->
								<image src="/static/image/banner.png" mode=""></image>
								<image src="/static/image/banner.png" mode=""></image>
								<image src="/static/image/banner.png" mode=""></image>
								<image src="/static/image/banner.png" mode=""></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						title: '全部',
						icon: ['uniapplogi1', 'uniapplogi1', 'uniapplogi1', 'uniapplogi1']
					},
					{
						title: '分类',
						list: ['uniapplogi1', 'uniapplogi1']
					},
					{
						title: '分类',
						list: ['uniapplogi1', 'uniapplogi1']
					},
					{
						title: '分类',
						list: ['uniapplogi1', 'uniapplogi1']
					},
					{
						title: '分类',
						list: ['uniapplogi1', 'uniapplogi1']
					},
					{
						title: '分类',
						list: ['uniapplogi1', 'uniapplogi1']
					},
					{
						title: '分类',
						list: ['uniapplogi1', 'uniapplogi1']
					},
					{
						title: '分类',
						list: ['uniapplogi1', 'uniapplogi1']
					},
					{
						title: '分类',
						list: ['uniapplogi1', 'uniapplogi1']
					},
					{
						title: '分类',
						list: ['uniapplogi1', 'uniapplogi1']
					},
					{
						title: '分类',
						list: ['uniapplogi1', 'uniapplogi1']
					},
					{
						title: '分类',
						list: ['uniapplogi1', 'uniapplogi1']
					},
					{
						title: '分类',
						list: ['uniapplogi1', 'uniapplogi1']
					}
				],
				clickId: '',
				clickToId: '',
				currentNum: 0,
				topList: [],
				isLeftClick: false
			};
		},
		methods: {
			setId(index) {
				this.clickId = 'po' + index;
				this.isLeftClick = true;
				this.currentNum = index;
			},
			scroll(e) {
				if (this.isLeftClick) {
					this.isLeftClick = false;
					return;
				}
				let scrollTop = e.target.scrollTop;
				for (let i = 0; i < this.topList.length; i++) {
					let h1 = this.topList[i];
					let h2 = this.topList[i + 1];
					if (scrollTop >= h1 && scrollTop < h2) {
						this.currentNum = i;
						this.clickToId = 'to' + i;
					}
					//解决滚动到最后选项左侧不会选中
					let length = this.topList.length;
					if (scrollTop >= this.topList[length - 1]) {
						this.currentNum = length - 1;
						this.clickToId = 'to' + length - 1;
					}
				}
			},
			getNodesInfo() {
				//获取节点为.right_title距离顶部的距离，返回值放在数组中
				const query = uni.createSelectorQuery().in(this);
				query
					.selectAll('.right_title')
					.boundingClientRect()
					.exec(res => {
						console.log(res);
						let nodes = res[0];
						let rel = [];
						nodes.map(item => {
							rel.push(item.top);
						});
						console.log(rel);
						this.topList = rel;
					});
			}
		},
		onLoad() {
			let _that = this;
			uni.getSystemInfo({
				success: function(res) {
					_that.windowHeight = res.windowHeight + 'px';
				}
			});
			this.getNodesInfo();
		}
	};
</script>

<style lang="less" scoped>
	.ld {
		display: flex;

		.left {
			width: 160rpx;

			.title {
				text-align: center;
				height: 100rpx;
				line-height: 100upx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
			}

			.active {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #666666;
				border-left: 8rpx solid #0099FF;
			}
		}

		.right {
			width: 600rpx;
			display: flex;

			.item {
				margin: 0 auto;
				width: 550rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.item-img {
					margin: 30rpx 10rpx 0 0;

					image {
						width: 240rpx;
						height: 184rpx;
						margin-left: 20rpx;
						border-radius: 15rpx;
					}
				}
			}

			.shangjia {
				padding: 10rpx 0 0 33rpx;
				text {
					font-size: 21rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
				}

			}
		}
	}
</style>
